<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item :to="{ path: '/my/shenKang-index' }">
                <i class="el-icon-s-home"></i>
                <span>上海申康</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <span>患者信息</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="main-container">
            <p><span class="span-label">上传总量:{{uploadCount.total}}</span><span class="span-label">上传成功:{{uploadCount.successNum}}</span><span class="span-label">上传失败:{{uploadCount.failNum}}</span></p>
            <div style="display:flex;flex-direction:column;width:50%;">
                <div v-if="showPageInfoAll">
                    <div style="display:flex;justify-content:space-between;">
                        <div>上传详细信息列表</div>
                        <el-button
                            size="mini"
                            @click='showFailList'
                        >展示失败列表</el-button>
                    </div>
                    <el-table
                        :data="allInfoList"
                        border
                        :cell-style="{'text-align':'center'}"
                        :header-cell-style="{
              'background-color': '#E6E9EF',
              'color':'#777C7C',
              'font-weight':'400',
              'font-size' : '15px',
              'border-right': '1px solid #ffffff',
              'text-align':'center'}"
                        size="mini"
                        style="width: 100%;margin-top: 20px;"
                    >
                        <el-table-column
                            prop="patientId"
                            label="患者编号"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="code"
                            label="上传结果"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="patientMasterId"
                            label="患者索引"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="createTime"
                            label="上传时间"
                        >
                        </el-table-column>
                    </el-table>
                    <el-row
                        style="margin-top: 10px"
                        align="right"
                    >
                        <el-pagination
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                            :current-page="1"
                            :page-size="15"
                            :page-sizes="[10, 15, 20]"
                            :total="uploadCount.total"
                            style="text-align: center; margin-top: 12px;"
                            layout="sizes, prev, pager, next, total"
                        >
                        </el-pagination>
                    </el-row>
                </div>
                <div v-if="showPageInfo">
                    <p>上传失败信息列表</p>
                    <el-table
                        :data="failInfoList"
                        border
                        :cell-style="{'text-align':'center'}"
                        :header-cell-style="{
              'background-color': '#E6E9EF',
              'color':'#777C7C',
              'font-weight':'400',
              'font-size' : '15px',
              'border-right': '1px solid #ffffff',
              'text-align':'center'}"
                        size="mini"
                        style="width: 100%;margin-top: 20px;"
                    >
                        <el-table-column
                            prop="patientId"
                            label="患者编号"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="msg"
                            label="失败原因"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="createTime"
                            label="上传时间"
                        >
                        </el-table-column>
                        <!-- <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="reUpload(scope.row)" type="text" size="small">重传</el-button>
              </template>
            </el-table-column> -->
                    </el-table>
                    <el-row
                        style="margin-top: 10px"
                        align="right"
                    >
                        <el-pagination
                            @current-change="handleCurrentChangeFail"
                            @size-change="handleSizeChangeFail"
                            :current-page="1"
                            :page-size="15"
                            :page-sizes="[10, 15, 20]"
                            :total="failInfoList.length"
                            style="text-align: center; margin-top: 12px;"
                            layout="sizes, prev, pager, next, total"
                        >
                        </el-pagination>
                    </el-row>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
    name: 'PatientInformation',
    data() {
        return {
            uploadCount: {},
            allInfoList: [],
            failInfoList: [],
            showPageInfo: false,
            showPageInfoAll: true,
            pages: 0,
            sizes: 15,
            failPages: 0,
            failSizes: 15,
        };
    },
    mounted() {
        this.getPatientInfo(0, 15);
        this.getResultCount();
        this.getFailList(0, 15);
    },
    methods: {
        //点击所有信息列表的分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.sizes = val;
            this.getPatientInfo(this.pages, this.sizes);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pages = val - 1;
            this.getPatientInfo(this.pages, this.sizes);
        },
        //点击失败列表的分页
        handleSizeChangeFail(val) {
            console.log(`每页 ${val} 条`);
            this.failSizes = val;
            this.getFailList(this.failPages, this.failSizes);
        },
        handleCurrentChangeFail(val) {
            console.log(`当前页: ${val}`);
            this.failPages = val - 1;
            this.getFailList(this.failPages, this.failSizes);
        },
        //获取所有病人基本信息
        getPatientInfo(pages, sizes) {
            const that = this;
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/skPatientInfoUploadResult/findAll',
                params: {
                    page: pages,
                    size: sizes,
                },
            })
                .then(function (res) {
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    } else {
                        that.uploadCount.total = res.data.pageInfo.total;
                        res.data.data.forEach((element) => {
                            if (element.code == '0') {
                                element.code = '成功';
                            } else {
                                element.code = '失败';
                            }
                        });
                        console.log(res.data.data);
                        that.allInfoList = res.data.data;
                    }
                })
                .catch(function (err) {});
        },
        //获取上传成功失败数
        getResultCount() {
            const that = this;
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/skPatientInfoUploadResult/findByCountCode',
            })
                .then(function (res) {
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    } else {
                        that.uploadCount.successNum = res.data.success;
                        that.uploadCount.failNum = res.data.fail;
                    }
                })
                .catch(function (err) {});
        },
        //是否展示失败列表
        showFailList() {
            if (this.showPageInfo == true) {
                this.showPageInfo = false;
            } else {
                this.showPageInfo = true;
            }
        },
        //获取失败的数据列表
        getFailList(failPages, failSizes) {
            const that = this;
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/skPatientInfoUploadResult/list',
                params: {
                    code: '1',
                    page: failPages,
                    size: failSizes,
                },
            })
                .then(function (res) {
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    } else {
                        console.log(res.data);
                        that.failInfoList = res.data.data;
                    }
                })
                .catch(function (err) {});
        },

        reUpload(row) {
            setTimeout(function () {
                Message.success('重传成功');
            }, 1000);
        },
    },
};
</script>

<style scoped>
.span-label {
    margin-right: 30px;
}
</style>
